html,
body {
  height: 100%;
  width: 100%;
}

.tencent {
  width: 100%;
}

/* 顶部导航栏 */
.app-top {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
  opacity: .7;
  z-index: 100;
  background-image: linear-gradient(0deg, rgba(20, 20, 20, 0) 1%, rgba(20, 20, 20, .7) 99%);
}

.logo {
  width: 180px;
  height: 60px;
}

.logo a {
  display: block;
  width: 180px;
  height: 60px;
  font-size: 0;
  background: url(../images/logo.png) no-repeat;
  background-size: contain;
  opacity: .3;
}

.search {
  position: relative;
  width: 455px;
  height: 62px;
}

.search input {
  height: 100%;
  width: 100%;
  font-size: 20px;
  border-radius: 30px;
  padding: 25px;
  opacity: .4;
  outline: none;
  border: 0;
  color: #fff;
  background: rgba(255, 255, 255, .6);
}

.search input::placeholder {
  color: rgba(255, 255, 255, .3);
}

.search>i {
  position: absolute;
  top: 7px;
  right: 32px;
  width: 28px;
  height: 28px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

.search:hover>input::placeholder {
  color: #fff;
  opacity: 1;
}

.search:hover>.icon-sousuo {
  opacity: 0;
}

.icon-resoubang_0912 {
  color: #fff;
  font-size: 20px;
  transform: translateX(-105px);
  opacity: 0;
}

.search-button {
  display: inline-block;
  position: absolute;
  right: 0;
  height: 100%;
  width: 130px;
  text-align: center;
  line-height: 62px;
  opacity: 0;
  background: rgba(255, 255, 255, .3);
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  cursor: pointer;
}

.search-button i {
  color: #fff;
  font-size: 20px;
}

.search-button span {
  display: inline-block;
  color: #fff;
  font-size: 20px;
}

.search:hover>.search-button,
.search:hover>.icon-resoubang_0912 {
  opacity: .4;
}

.smartbox {
  position: absolute;
  width: 100%;
  max-height: 200px;
  border-radius: 4px;
  background: #0f0f1e;
  box-shadow: 0 28px 50px rgb(25 24 40 / 35%);
  cursor: pointer;
  overflow: scroll;
}

.smartbox li {
  margin: 10px;
}

.smartbox::-webkit-scrollbar {
  display: none;
}

.user-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-right: 30px;
}

.user-nav a {
  display: block;
  width: 100%;
  height: 100%;
}

.user-nav i {
  width: 100%;
  height: 100%;
  font-size: 30px;
  color: #fff;
}

.user-nav .icon-gonggong-VIP {
  color: #f8e19d;
}

.vip,
.game,
.record,
.createcenter,
.version {
  width: 33px;
  height: 33px;
  margin-right: 26px;
}

.user {
  padding: 50px 0;
}

.user a img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.triangle {
  display: none;
  position: absolute;
  top: 82px;
  right: 45px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #000;
}

.user-detail {
  display: none;
  position: absolute;
  top: 100px;
  right: 0;
  width: 350px;
  background: #000;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
}

.user-detail-top {
  font-size: 16px;
  text-align: center;
  padding: 5px;
  color: #fff;
}

.user-detail-middle li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.user-detail-middle li img {
  width: 30px;
  height: 30px;
}

.user-detail-middle li span {
  font-size: 16px;
  color: #676767;
}

.user-detail-bottom {
  width: 100%;
  font-size: 16px;
  color: #fff;
  text-align: center;
  border-radius: 30px;
  background-color: #FF6022;
  padding: 15px 10px;
  margin-top: 10px;
}

/* 左侧导航栏 */
.nav-left {
  position: fixed;
  top: 79px;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 179px;
  opacity: .7;
  z-index: 100;
  overflow: scroll;
  background-image: linear-gradient(-90deg, rgba(20, 20, 20, .3) 1%, rgba(20, 20, 20, .9) 99%);
}

.nav-left::-webkit-scrollbar {
  display: none;
}

.nav-left-items {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: 35px;
  overflow: hidden;
  cursor: pointer;
}

.nav-left-items i {
  width: 28px;
  height: 28px;
  font-size: 28px;
}

.nav-left-items span {
  font-size: 18px;
  margin: 10px 0 0 20px;
  color: #999a9e;
}

/* 背景 */
.background {
  position: relative;
  width: 100%;
  height: 800px;
  background: url(../images/background-box/01/background.jpg) no-repeat;
  background-size: cover;
  cursor: pointer;
  transition: all .4s;
}

/* 介绍 */
.introduce {
  position: absolute;
  left: 230px;
  bottom: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 11;
}

.introduce-img {
  width: 180px;
  height: 60px;
}

.introduce-img img {
  height: 100%;
  width: 100%;
}

.introduce-type {
  font-size: 16px;
  color: white;
  margin-top: 7px;
}

.introduce-text {
  font-size: 16px;
  color: white;
  margin-top: 7px;
}

.introduce-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 300px;
  height: 80px;
  margin-top: 35px;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 55px;
  border-radius: 40px;
  background: rgba(255, 255, 255, .15);
  cursor: pointer;
}

.button::before {
  content: '\e87c';
  font-family: iconfont;
  font-size: 20px;
  color: #fff;
  margin-right: 5px;
}

.button span {
  font-size: 18px;
  color: white;
}

.voice {
  width: 30px;
  height: 24px;
  margin-left: 11px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
}

/* 其他作品 */
.recommendation {
  position: absolute;
  bottom: 135px;
  right: 40px;
  width: 700px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 99;
}

.recommendation ul {
  display: flex;
}

.recommendation .active {
  filter: brightness(2);
}

.prev,
.next {
  width: 30px;
  height: 40px;
  color: white;
  margin-bottom: 35px;
  cursor: pointer;
}

.prev::before {
  content: '\e633';
  font-family: iconfont;
  font-size: 30px;
  color: #fff;
}

.next::after {
  content: '\e630';
  font-family: iconfont;
  font-size: 30px;
  color: #fff;
}

.work {
  width: 120px;
  height: 200px;
  margin: 0 5px;
}

.work a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.work img {
  width: 100%;
  height: 180px;
  border-radius: 15px;
  filter: brightness(0.5);
}

.work span {
  font-size: 16px;
  color: white;
  margin-top: 10px;
  z-index: 11;
}

.bottom-shadow {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #141414);
}

/* 登录框 */
.background-shadow {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgb(63, 60, 60, 0.6);
  z-index: 101;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 478px;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 51px;
  background-color: #f1f1f1;
  border-bottom: 1px solid #e6e6e6;
}

.box-header span {
  color: black;
  font-size: 24px;
}

.box-header i {
  font-size: 20px;
  color: #ccc;
  padding: 0 10px;
}

.box h3 {
  color: black;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 50px;
}

.box a {
  color: #2e77e5;
}

.box-body {
  display: flex;
}

.box-body article {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60%;
  border-right: 1px solid #ccc;
}

.box-body article h4 {
  color: black;
  font-weight: 400;
  font-size: 24px;
}

.box-body article p {
  font-size: 12px;
  margin-bottom: 30px;
}

.box-body article input {
  width: 250px;
  height: 38px;
  outline: none;
  padding: 0 20px 0;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.box-body article input::placeholder {
  color: #929493;
}

.box-body article button {
  width: 250px;
  color: #fff;
  background-color: #09F;
  border: 0;
  border-radius: 4px;
  padding: 10px 0;
  margin: 20px 0 50px;
}

.function {
  display: flex;
  justify-content: space-between;
  width: 250px;
}

.function a {
  color: black;
}

.box aside {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(-30px);
}

.box aside ul li {
  display: flex;
  margin-left: 50px;
}

.box aside input {
  width: 16px;
  height: 16px;
  margin: 0 10px 5px 0;
  visibility: hidden;
}

.box aside input::after {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../images/accord/right-unchecked.png) no-repeat;
  background-size: contain;
  visibility: visible;
}

#all:checked::after {
  background: url(../images/accord/right.png) no-repeat;
  background-size: contain;
}

#information:checked:disabled::after {
  background: url(../images/accord/wrong.png) no-repeat;
  background-size: contain;
}

.box aside p {
  margin-left: 50px;
}

/* 主体内容 */
.body {
  width: calc(100%-230px);
  height: 100%;
  background-color: #141414;
  padding-left: 230px;
}

.w {
  margin-right: 30px;
}

.text-hd {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hd-type {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hd-type h4 {
  color: white;
  font-size: 30px;
  font-weight: 400;
  margin-right: 30px;
}

.hd-type ul {
  display: flex;
}

.hd-type ul li {
  font-size: 18px;
}

.hd-type ul li a {
  font-size: 16px;
  color: #929493;
  padding: 0 25px;
}

.hd-type .active {
  color: #fff;
}

.hd-type ul li a:hover {
  color: #fff;
}

.change {
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: pointer;
}

.change span {
  color: #676767;
  font-size: 14px;
}

.change i {
  color: #676767;
  font-size: 14px;
}

.change:hover>span,
.change:hover>i {
  color: #fff;
}

.text-bd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.bd-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 290px;
  height: 255px;
  margin: 0 23px 5px 0;
  cursor: pointer;
}

.bd-element {
  position: relative;
  height: 80%;
  border-radius: 10px;
  overflow: hidden;
}

.bd-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.bd-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd-type {
  position: absolute;
  top: 0;
  right: 0;
  height: 23px;
  text-align: center;
  line-height: 23px;
  padding: 0 10px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 101, 15);
  border-bottom-left-radius: 10px;
}

.bd-episode {
  position: absolute;
  bottom: 4px;
  right: 10px;
  color: #fff;
}

.hidden-video {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none;
}

/* 播放按钮 */
video::-webkit-media-controls-play-button {
  display: none;
}

/* 进度条 */
video::-webkit-media-controls-timeline {
  display: block;
}

/* 观看的当前时间 */
video::-webkit-media-controls-current-time-display {
  display: block;
}

/* 剩余时间 */
video::-webkit-media-controls-time-remaining-display {
  display: none;
}

/* 音量按钮 */
video::-webkit-media-controls-mute-button {
  display: none;
}

video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}

/* 音量的控制条 */
video::-webkit-media-controls-volume-slider {
  display: none;
}

.bd-text {
  position: relative;
  height: 80px;
  overflow: hidden;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.bd-intro {
  display: flex;
  flex-direction: column;
}

.work-title {
  font-size: 16px;
  color: #fff;
  padding: 3px 0;
}

.work-text {
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}

.video-intro {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: rgb(125, 128, 107);
  padding: 0 10px;
  opacity: 0;
}

.shoucang {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 8px;
  width: 62px;
  height: 32px;
  background: rgba(255, 255, 255, .15);
  border-radius: 36px;
  cursor: pointer;
}

.shoucang i {
  color: #fff;
  font-size: 14px;
}

.subscribe {
  color: #fff;
  font-size: 14px;
}

.subscribe-active {
  display: none;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}

.tip {
  display: none;
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .9);
  padding: 13px 24px;
  border-radius: 30px;
  font-size: 16px;
  color: #fff;
  z-index: 114;
}

@media screen and (max-width:1440px) and (min-width:1280px) {
  .work {
    width: 140px;
  }

  .work:nth-child(6) {
    display: none;
  }

  .bd-item {
    width: 335px;
  }
}